<template>
    <div class="companyBody">
        <div class="comBanner">
            <img class="banner" :src="mainPic" :alt="'新盛合环保'">
            <div class="rightConnect">
                <h1>厂家直连：
                    <div class="goldLine"></div>
                </h1>
                <h1>{{leaders.length>0?leaders[0]?.mobile:'18999931669'}}</h1>
            </div>
    
        </div>
        <div class="container">
            <div class="companyContent">
    
                <div class="companyHeader">
                    <h2 class="headerTitle">{{companyName}}</h2>
                    <h3 class="headerDesc">{{'XIN SHENG HE INTRODUCTION'}}</h3>
                </div>
    
                <div class="companyDesc" v-html="comIntroContent?.moduleContent"></div>
    
                <div class="companyDescSub ">
                    <div class="subBox">
                        <div class="subItem" v-for="(item,index) in comSub" :key="index">
                            <p class="subTitle">{{item?.name}}</p>
                            <p class="subDesc">{{item?.desc}}</p>
                        </div>
                    </div>
                </div>
    
                <div class="videoBox">
                  <div class="videoImgs" id="videoCom"></div>
                </div>
    
                <div class="honorBox ">
                    <div class="honorHeader">
                        <div class="headerTitle">新盛合荣誉资质</div>
                    </div>
                    <div class="honorList">
                      <div class="honorItem" v-for="(item,index) in comHonor?.coreDescDtos" :key="index">
                        <el-image   
                        :fit="'fill'" class="honorImageItem" :src="item?.icon" :hide-on-click-modal="true"
                        :alt="item?.title+'-'+'新盛合环保设备'" :preview-src-list="imgHonor" :initial-index="index">
                          <template #placeholder>
                            <EmptyImg :width="'145px'" :height="'145px'" />

                          </template>
                          <template #error>
                            <div class="image-slot">
                              <el-icon><icon-picture /></el-icon>
                            </div>
                          </template>
                          <template #viewer>
                            
                          </template>
                        </el-image>

                        <div class="itemDesc">{{item?.title}}</div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { throwError } from 'element-plus/es/utils/error.mjs';

import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css'

// import { ref, watch } from 'vue'
const route = useRoute();
console.log("当前路由：", route.name);

//监听路由参数，测试无效
watch(() => route.query.id, (newValue, oldValue) => {
    console.log("路由变化了", route.query)
    console.log("路由new", newValue, oldValue)
},
()=>route.name,(newValue)=>{
  console.log("路由name",newValue)
}
)

//动态标题
//const title=ref(route.query.keyword) //route.params.keyword
const title = ref('公司介绍')
//注意这里设置title容易读缓存
useHead({ title })

/********
 * 参数集
 */
 const leaders = ref([])
const companyName = ref('新盛合环保设备')
const comIntroContent = ref({})
const comSub = ref([
    { name: '企业使命', desc: '成为玻璃钢产业的引领者' },
    { name: '企业愿景', desc: '创建世界一流化工企业' },
    { name: '战略定位', desc: '全球领先的防腐材料供应商与数字化工解决方案服务商' },
])
const comHonor = ref([])
const imgHonor = ref([])
const playerId = ref('playerId')
const mainPic = ref('/imgs/index/banner-index-2.jpg')// 

const defaultImageSrc= '/imgs/header/wechat-code-300-300.png'

/********
 * 参数集end
 */

definePageMeta({
    //设置页面标题
    title: '公司介绍',

    // 以下对于搜索引擎进行优化，无效start

    //设置页面描述
    // description: '新疆新盛合环保设备有限公司是新疆新技术产业园区的企业，注册资金1600万，厂区占地面积5600平米，主要从事玻璃钢制品设计、开发、生产制造，主要产品有:玻璃钢冷却塔、玻璃钢化粪池、玻璃钢管道、玻璃钢电缆管、标志桩、警示牌、净化塔、格栅、拉挤型材、风机等。',
    // //设置页面关键词
    // keywords: '新疆新盛合环保,玻璃钢化粪池,玻璃钢管道,玻璃钢电缆管,玻璃钢冷却塔',
    // //设置页面图标
    // // icon: '/favicon.ico',
    // //设置页面作者
    // author: '新盛合环保',
    // //设置页面版权
    // copyright: '© 2024 by 新疆新盛合环保设备有限公司 All Rights Reserved.',
    // //设置页面语言
    // lang: 'zh-CN',
    // charset: 'utf-8',
    // viewport: 'width=device-width, initial-scale=1.0',

    // 以上对于搜索引擎进行优化，无效end

    middleware: async (context) => {
        console.log("中间件", context);
    },
})



const {data,error}=await GetCompanyInfo()
console.log("公司信息：",data.value)
if(process.server && error.value){
  throwError((error.value?.data,error.value?.data.error+': '+error.value?.data.status),'页面加载失败，请联系客服！')
}

if(data.value?.length>0){
  comIntroContent.value=data.value[0]
}

console.log("comIntroContent：",comIntroContent.value)

const honorData=await GetHonorList()

if(process.server && honorData.error.value){
  throwError((error.value?.data,error.value?.data.error+': '+error.value?.data.status),'页面加载失败，请联系客服！')
}

if(honorData.data.value?.length>0){
  comHonor.value=honorData.data.value[0]
  imgHonor.value=comHonor.value.coreDescDtos.map(item=>item.icon)
}

console.log("comHonor：",comHonor.value)
console.log("imgHonor：",imgHonor.value)

let video={
  video: "http://cevent-source-cloud.oss-cn-beijing.aliyuncs.com/source/source_public/2024_03_27/2024_03_27_C96BurQvxSiYawSwcqA4o_新盛合环保设备有限公司宣传片1.mp4",
  seoTitle: "新疆新盛合环保设备有限公司宣传片",
  seoDescription: "新疆新盛合环保设备有限公司是新疆新技术产业园区的企业，注册资金1600万，厂区占地面积5600平米，公司主要从事玻璃钢制品设计、开发、生产制造，主要产品有:玻璃钢冷却塔、玻璃钢化粪池、玻璃钢管道、玻璃钢电缆管、标志桩、警示牌、净化塔、格栅、拉挤型材、风机等。",
  seoKeyword: ['新疆新盛合环保设备有限公司宣传片', '新盛合', '环保设备', '宣传片'],
  videoCover: "http://cevent-source-cloud.oss-cn-beijing.aliyuncs.com/source/source_public/2024_03_27/2024_03_27_6XvC5stegwCyK6AmSc2Ckk_xsh封面1.png",
}



const openVideo=(video)=>{
  // console.log("video---：",video) // picCover  video
  // console.log("video.video: ",video.video)
  // console.log("videoCover: ",video.videoCover)
  const player = new Player({
         id: 'videoCom',
         url: [
          {
            src: video.video,
            type: 'video/mp4'
          },
        ],
         poster:video.videoCover,
         controls: true, // true/false决定是否使用底部控制栏，
         miniprogress: true, // 是否使用mini进度条（当底部控制栏隐藏时生效）
         autoplay:false,
         loop:false,
         volume: {
            default: 0.6, // 默认音量0.6，
            showValueLabel: true // 是否在音量控制条顶部显示音量百分比
          },
          fitVideoSize: 'auto',

         width:'70%',
         height:'300px',

         lang: 'zh-cn',
         
         
         // fluid: true,//设置为流式布局，可使播放器宽度跟随父元素的宽度大小变化，且高度按照配置项中的高度和宽度的比例来变化（播放器宽高未设置时按照内部默认值来计算）
         cssFullscreen: false,//全屏功能不会隐藏当前浏览器的标签栏，导航栏，只是在当前页面内部全屏显示
         /*videoFillMode：
         fillWidth 填充宽度，高度溢出则裁剪高度
          fillHeight 填充高度，宽度溢出则裁剪宽度
          fill 拉伸填充
          contain 保持宽高比，缩放至一边填满容器，另一边将添加“黑边”
          auto 默认值，同浏览器默认
         */
         videoFillMode:'fillHeight',
         // lastPlayTime: 20, //记忆播放：视频起播时间（单位：秒）
         // lastPlayTimeHideDelay: 5, //记忆播放：提示文字展示时长（单位：秒）

         // rotate: {   //视频旋转按钮配置项
         //     innerRotate: true, //只旋转内部video
         //     clockwise: false // 旋转方向是否为顺时针
         // },

         enableContextmenu:false,//播放器区域是否允许右键功能菜单
        //  screenShot: true, //显示截图按钮，这里不配置，需要查找一些资料，下面官方给的跨域不能实现
        // //Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
        //   videoAttributes: {
        //     crossOrigin: 'anonymous'
        //   },
         download:true,//是否使下载按钮，该配置项为下载按钮快捷启动配置
         playbackRate: [0.5, 0.75, 1, 1.5, 2],//播放倍速
         defaultPlaybackRate: 1,//播放倍速
         playbackRateUnit:'倍',//倍速单位
         mini: false, //开启小窗插件
         keyboard: true,
         keyCodeMap: {
           //禁用空格键切换播放/暂停
           'space': {
             disable: true
           },
           // 修改向上快捷键行为
           'up': {
             action: function () {
               console.log('当前是点击了快捷键38')
             }
           },
           // 修改快进行为触发的快捷键改为l键
           'left': {
             keyCode: 76
           },
           // 自定义一个快捷键操作
           'custom': {
             keyCode: 13,
             action: () => { //快捷键触发的时候执行该函数
               console.log('这是一个自定义快捷键操作，点击的是回车键')
             }
           },
           'custom2': {
             keyCode: 14,
             action: 'customAction2' // 插件内部没有customAction2的实现，需要结合事件下发自己实现具体功能
           },
         },
        //  danmu: {
        //      comments: [
        //         {
        //            duration: 15000,
        //            id: '1',
        //            start: 3000,
        //            txt: '新盛合的玻璃钢管道耐腐蚀性真强！',
        //            style: {  //弹幕自定义样式
        //               color: '#ff9500',
        //               fontSize: '20px',
        //               border: 'solid 1px #ff9500',
        //               borderRadius: '50px',
        //               padding: '5px 11px',
        //               backgroundColor: 'rgba(255, 255, 255, 0.1)'
        //            }
        //         },
        //         {
        //            duration: 15000,
        //            id: '2',
        //            start: 8000,
        //            txt: '玻璃钢化粪池在我们这也有很多需求，方便联系下吗？',
        //            style: {  //弹幕自定义样式
        //               color: '#1a7d9a',
        //               fontSize: '20px',
        //               // border: 'solid 1px #ff9500',
        //               // borderRadius: '50px',
        //               padding: '5px 11px',
        //               backgroundColor: 'rgba(255, 255, 255, 0.1)'
        //            }
        //         },
        //         {
        //            duration: 15000,
        //            id: '3',
        //            start: 13000,
        //            txt: '一体化泵站包运输到单位吗？有运费吗？',
        //            style: {  //弹幕自定义样式
        //               color: '#f14e25',
        //               fontSize: '20px',
        //               border: 'solid 1px #ff9500',
        //               borderRadius: '50px',
        //               padding: '5px 11px',
        //               backgroundColor: 'rgba(255, 255, 255, 0.1)'
        //            }
        //         },
        //         {
        //            duration: 15000,
        //            id: '4',
        //            start: 3000,
        //            txt: '工厂有需求，麻烦联系下！',
        //            style: {  //弹幕自定义样式
        //               color: '#ff9500',
        //               fontSize: '20px',
        //               border: 'solid 1px #ff9500',
        //               borderRadius: '50px',
        //               padding: '5px 11px',
        //               backgroundColor: 'rgba(255, 255, 255, 0.1)'
        //            }
        //         },
        //      ],
        //      area: {
        //         start: 0,
        //         end: 1
        //      }
        //  },
         //播放器使用自执行的插件机制，如需要在插件生效前执行某些方法，开发者可将相关方法写在execBeforePluginsCall配置项数组中
         execBeforePluginsCall: [() => {
            console.log('Execute before plugins call')
            that.loading=false
         }
        ]
      });
}

if(process.client){
  setTimeout(()=>{
    openVideo(video)
  },0)
  
}


//页面跳转传参
const handleClick = (e) => {
    navigateTo({
        path: '/company/detail',
        query: {
            id: 1,
            ...route.query
        },
        params: {
            id: 2,
            ...route.params
        }
    })
}
</script>

<style lang="scss" scoped>
.companyBody {
    //头部
    .comBanner {
        background-position: center;
        width: 100%;
        height: auto;
        /*避免图片尺寸不一样，进行填充屏幕*/
        background-size: cover;
        position: relative;
        .banner{
          object-fit: cover;
          width: 100%;
          height: 300px;
        }
        .rightConnect {
            position: absolute;
            right: 15%;
            bottom: 20px;
            /*width: 350px;*/
            display: flex;
            font-size: 24px !important;
            color: #ffffff !important;
            background-color: rgba(233, 35, 34, .8);
            padding: 10px 20px;
            margin: 0 !important;
            overflow: hidden;
            h1 {
                display: flex;
                margin: 0 !important;
                position: relative;
                font-size: 28px;
                .goldLine {
                    position: absolute;
                    width: 8px;
                    height: 40px;
                    background-color: #f3d854;
                    top: -20px;
                    left: -15px;
                    transform: rotateZ(45deg);
                }
            }
        }
    }
    /*公司部分new*/
    .container {
      margin: 0;
        .companyContent {
            width: 70%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            height: 100%;
            .companyHeader {
                display: flex;
                // padding-top: 30px;
                
                flex-direction: column;
                justify-content: center;
                .headerTitle {
                    margin: 20px 0;
                    text-align: center;
                    font-size: 44px;
                    line-height: 54px;
                    display: inline-block;
                    font-weight: bold;
                    background-image: -webkit-gradient(linear, left top, right top, from(#32beff), to(#005aab));
                    background-image: -webkit-linear-gradient(left, #32beff 0%, #005aab 100%);
                    background-image: -moz-linear-gradient(left, #32beff 0%, #005aab 100%);
                    background-image: linear-gradient(to right, #32beff 0%, #005aab 100%);
                    -webkit-background-clip: text;
                    color: transparent;
                }
                .headerDesc {
                    color: rgba(15, 35, 65, 0.2);
                    text-align: center;
                    font-family: Arial;
                    font-size: 20px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 20px;
                    letter-spacing: 10px;
                    text-transform: uppercase;
                    margin: 0;
                    padding-bottom: 10px;
                    padding-left: 10px;
                }
            }
            .companyDesc {
                padding: 20px;
                border-top: 1px solid rgba(15, 35, 65, 0.2);
            }
            .companyDescSub {
                width: 100%;
                .subBox {
                    display: flex;
                    width: 100%;
                    align-items: center;
                    justify-content: space-between;
                    .subItem {
                        width: 31.5%;
                        min-height: 150px;
                        background: url('/public/imgs/company/tag-bg-1.jpg') no-repeat center;
                        background-size: cover;
                        overflow: hidden;
                        border-radius: 10px;
                        box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.1), -8px -8px 10px 0px #fff;
                        padding: 0 20px 10px 30px;
                        -moz-box-sizing: border-box;
                        box-sizing: border-box;
                        transition: 500ms;
                        &:hover,
                        &:focus {
                            transform: scale(1.1);
                        }
                        &:nth-child(2) {
                            background: url('/public/imgs/company/tag-bg-2.jpg') no-repeat center;
                        }
                        &:last-child {
                            background: url('/public/imgs/company/tag-bg-3.jpg') no-repeat center;
                        }
                        .subTitle {
                            color: #333;
                            font-size: 26px;
                            font-style: normal;
                            font-weight: bold;
                            margin-block-end: unset !important;
                        }
                        .subDesc {
                            color: #666;
                            font-size: 18px;
                            font-style: normal;
                            font-weight: 400;
                            // margin-top: 5px;
                            line-height: 1.5;
                        }
                    }
                }
            }
            .videoBox {
                padding-top: 40px;
                padding-bottom: 30px;
                width: 100%;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                
                .videoImgs {
                  width: 100%;
                  height: 300px;
                  border-radius: 20px;
                  overflow: hidden;
                }
            }
            .honorBox {
                width: 100%;
                margin-top: 10px;
                .honorHeader {
                    width: 100%;
                    height: 200px;
                    background-image: url('/public/imgs/company/rongyu-2.jpg');
                    background-position: 50% 10%;
                    background-repeat: no-repeat;
                    border-radius: 10px;
                    box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.1), -8px -8px 10px 0px #fff;
                    margin-bottom: 40px;
                    .headerTitle {
                        font-size: 34px;
                        line-height: 53px;
                        font-weight: 700;
                        color: #fff;
                        margin-left: 11%;
                        padding-top: 5%;
                        
                    }
                }
                .honorList {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-bottom: 10px;
                    border-bottom: 1px dashed #cccccc;
                    margin-bottom: 10px;
                    .honorImageItem {
                      border-radius: 10px;
                      box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.1), -8px -8px 10px 0px #fff;
                      transition: 500ms;
                      max-width: 90%;
                      cursor: pointer;
                      margin: 0 auto;
                      
                    }
                    .honorItem {
                        display: flex;
                        flex-direction: column;
                        width: auto;
                        cursor:alias;
                        
                        .itemDesc {
                          // max-width: 23%;
                            padding: 10px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: #999999;
                            font-size: 18px;
                            font-weight: 700;
                        }
                    }
                }
            }
        }
    }
}
</style>